﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>翡翰MES系统</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/comon0.css" />
  </head>
  <body>
    <!-- <div class="loading">
  <div class="loadbox"> <img src="images/loading.gif"> 页面加载中... </div>
</div> -->
    <div class="head">
      <div style="display: inline"><h1>自动生产线看板</h1></div>
      <div class="" id="orderCode" style="display: inline; float: left; font-size: 0.2rem; width: 25%; margin-left: 0.8rem">
        <form>
          <input type="text" name="orderCode" id="orderCodeTxt" class="input" onblur="lostFocus()" onchange="onchangeInput()" autocomplete="off" />

          <span><input type="submit" value="加载订单" class="loadBtn" onclick="loadOrder()" /> </span>
        </form>
      </div>

      <div id="showTime" style="display: inline; float: right; font-size: 0.2rem; margin-right: 1.5rem"></div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li>
          <div class="boxall" style="height: calc(33.3333% - 0.25rem)">
            <div class="tit01">一周不良品统计</div>
            <div class="boxnav nav01" id="badProductChart"></div>
            <div class="boxfoot"></div>
          </div>

          <div style="height: calc(33.3333% - 0.25rem); margin-bottom: 0.25rem">
            <div class="boxall" style="height: 100%; width: calc(50% - 0.08rem); float: left">
              <div class="tit01">关键工序</div>
              <div class="boxnav nav01" id="flowChart"></div>
              <div class="boxfoot"></div>
            </div>

            <div class="boxall" style="height: 100%; width: calc(50% - 0.08rem); float: right">
              <div class="tit01">当日生产率评估</div>
              <div class="boxnav nav01">
                <div class="p4" style="margin-top: 5%">
                  <i id="dailyFinishColor" class="dot dot2"></i> 实际完成率 <span class="p4" id="dailyFinishRate">10% </span>
                </div>
                <div class="p4" style="margin-top: 5%">
                  <i class="dot dot3"></i> 期望完成率 <span class="p4" id="dailyFinishRateExcept">50% </span>
                </div>

                <div class="p4" style="margin-top: 5%">
                  <i id="realPieceTimeColor" class="dot dot1"></i> <span> 单件耗时 </span> <span id="realPieceTime"> 32 </span>
                </div>
                <div class="p4" style="margin-top: 5%">
                  <i class="dot dot3"></i> 标定耗时 <span class="p4" id="realPieceTimeStandard">30秒 </span>
                </div>
              </div>

              <div class="boxfoot"></div>
            </div>
          </div>

          <div class="boxall" style="height: calc(33.3333% - 0.25rem)">
            <div class="tit01">一周产量均差</div>
            <div class="boxnav nav01" id="echart3"></div>
            <div class="boxfoot"></div>
          </div>
        </li>

        <li>
          <div style="height: calc(33.3333% - 0.25rem); margin-bottom: 0.25rem">
            <div class="boxall" style="height: 100%; width: calc(50% - 0.08rem); float: left">
              <div style="height: 100%; width: calc(50% - 0.08rem); float: right; vertical-align: middle">
                <div class="tit01">订单总体进度</div>

                <div class="p4" style="margin-top: 10%">总体计划 <span class="p4" id="planQty">3000</span></div>

                <div class="p4"><span> 已经生产 </span> <span id="makedQty"> 300 </span></div>

                <div class="p4">不良品 <span id="badQty"> 2 </span></div>
                <div class="p4">完成率 <span id="orderFinishRate"> 20 </span></div>
              </div>
              <div style="height: 100%; width: calc(50% - 0.08rem); float: left">
                <!--	<div class="tit01">模块标题21</div>  -->
                <div class="" id="pieMaked" style="float: left; height: 100%; width: 100%; margin: 0, 0, 0, 0"></div>
              </div>

              <div class="boxfoot"></div>
            </div>

            <div class="boxall" style="height: 100%; width: calc(50% - 0.08rem); float: right">
              <div style="height: 100%; width: calc(50% - 0.08rem); float: right">
                <div class="tit01">订单今日进度</div>

                <div class="p4" style="margin-top: 10%">今日计划 <span class="p4" id="planQtyDaily">1000 </span></div>

                <div class="p4"><span> 已经生产 </span> <span id="makedQtyDaily"> 100 </span></div>

                <div class="p4">不良品 <span id="badQtyDaily"> 2 </span></div>
                <div class="p4">一次性通过率 <span id="passRateDaily"> 10 </span></div>
              </div>

              <div style="height: 100%; width: calc(50% - 0.08rem); float: left">
                <!--	<div class="tit01">模块标题21</div>  -->

                <div class="" id="pieMakedDaily" style="float: left; height: 100%; width: 100%; margin: 0, 0, 0, 0"></div>
              </div>

              <div class="boxfoot"></div>
            </div>
          </div>

          <div class="boxall" style="height: calc(66.666666% - 0.25rem)">
            <div class="tit03">近期生产计划列表</div>
            <div class="boxnav nav03">
              <div class="listhead listhead1">
                <span>订单号</span>
                <span>计划数量</span>
                <span>计划开始时间</span>
                <span>计划结束时间</span>
                <span>订单状态</span>
                <span>完成率</span>
              </div>
              <div class="listnav listnav1 scrollDiv">
                <ul id="orderPlanList">
                  <li>
                    <span>HME2024030101</span> <span>1000</span> <span>2024-03-03 12:12:12</span> <span>2024-03-15 12:12:12</span>
                    <span>创建</span> <span class="text-green">100%</span>
                  </li>
                  <li>
                    <span>HME2024030602</span> <span>2000</span> <span>2024-03-03 12:12:12</span> <span>2024-03-15 12:12:12</span>
                    <span>创建</span> <span class="text-green">100%</span>
                  </li>
                  <li>
                    <span>HME2024030603</span> <span>3000</span> <span>2024-03-06 12:12:12</span> <span>2024-03-15 12:12:12</span>
                    <span>进行中</span> <span class="text-green">80%</span>
                  </li>
                  <li>
                    <span>HME2024030604</span> <span>3000</span> <span>2024-03-06 12:12:12</span> <span>2024-03-15 12:12:12</span>
                    <span>创建</span> <span class="text-green">100%</span>
                  </li>
                  <li>
                    <span>HME2024030605</span> <span>2000</span> <span>2024-03-07 12:12:12</span> <span>2024-03-18 12:12:12</span>
                    <span>进行中</span> <span class="text-green">70%</span>
                  </li>
                  <li>
                    <span>HME2024030606</span> <span>3500</span> <span>2024-03-07 12:12:12</span> <span>2024-03-18 12:12:12</span>
                    <span>进行中</span> <span class="text-green">100%</span>
                  </li>
                  <li>
                    <span>HME2024030607</span> <span>3500</span> <span>2024-03-08 12:12:12</span> <span>2024-03-18 12:12:12</span>
                    <span>进行中</span> <span class="text-green">100%</span>
                  </li>
                  <li>
                    <span>HME2024030602</span> <span>2500</span> <span>2024-03-09 12:12:12</span> <span>2024-03-19 12:12:12</span>
                    <span class="text-red">终结</span> <span class="text-green">100%</span>
                  </li>
                  <li>
                    <span>HME2024030603</span> <span>3000</span> <span>2024-03-09 12:12:12</span> <span>2024-03-19 12:12:12</span>
                    <span>完成</span> <span class="text-green">100%</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>

        <li>
          <div class="boxall" style="height: calc(100% - 0.25rem); padding: 0">
            <div class="tit04">最近生产产品列表</div>
            <div class="boxnav nav04">
              <div class="listhead listhead2">
                <span>产品编码</span>
                <span>产品品质</span>
                <span>生产时间</span>
              </div>

              <div class="listnav listnav2 scrollDiv">
                <ul class="smjl" id="productList">
                  <li>
                    <span>HME202403040001</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/11 13:29:12" /> <span></span></span>
                  </li>

                  <li>
                    <span>HME202403040002</span>
                    <span class="text-red">异常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/13 13:29:12" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040003</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/14 13:29:12" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040004</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/14 13:29:12" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040005</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/15 13:29:12" /> <span></span></span>
                  </li>

                  <li>
                    <span>HME202403040006</span>
                    <span class="text-red">异常</span>
                    <span
                      ><span> <input type="hidden" name="countDown" value="2024/03/18 3:23:00" /> <span></span></span
                    ></span>
                  </li>

                  <li>
                    <span>HME202403040007</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/22 13:29:12" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040008</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/23 13:29:16" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040009</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/23 13:29:12" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040010</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/24 13:29:12" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040011</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/24 13:29:22" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040012</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/25 13:29:42" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202403040013</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/27 13:29:19" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202404040001</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/29 13:29:17" /> <span></span></span>
                  </li>

                  <li>
                    <span>HME202404040002</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/03/30 13:29:17" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202404040003</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/04/12 13:29:17" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202404040004</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/05/13 13:29:17" /> <span></span></span>
                  </li>
                  <li>
                    <span>HME202404040005</span>
                    <span class="text-green">正常</span>
                    <span> <input type="hidden" name="countDown" value="2024/04/15 13:29:17" /> <span></span></span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="boxfoot"></div>
          </div>
        </li>
      </ul>
    </div>

    <script type="text/javascript" src="js/echarts.min.js"></script>
    <script src="js/jquery.liMarquee.js"></script>
    <script language="JavaScript" src="js/js.js"></script>
    <script type="text/javascript" src="js/jquery.countup.min.js"></script>
    <script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
    <script type="text/javascript">
      $('.counter').countUp()

      $(function () {
        $('.scrollDiv').liMarquee({
          direction: 'up', //身上滚动
          runshort: true, //内容不足时不滚动
          scrollamount: 20 //速度
        })
      })
    </script>

    <script src="js/countDown.js"></script>
    <script type="text/javascript">
      $("input[name='countDown']").each(function () {
        var time_end = this.value
        var con = $(this).next('span')
        var _ = this.dataset
        countDown(con, {
          time_end: time_end //开始时间
        })
          //提供3个事件分别为:启动,重启,停止
          .on('countDownStarted countDownRestarted  countDownEnded ', function (arguments) {
            console.info(arguments)
          })
      })

      var t = null
      t = setTimeout(showTime, 1000) //開始运行
      function showTime() {
        clearTimeout(t) //清除定时器
        dt = new Date()
        var y = dt.getFullYear()
        var mt = dt.getMonth() + 1
        var day = dt.getDate()
        var h = dt.getHours() //获取时
        var m = dt.getMinutes() //获取分
        var s = dt.getSeconds() //获取秒
        document.getElementById('showTime').innerHTML = y + '年' + mt + '月' + day + '日' + '-' + h + '时' + m + '分' + s + '秒'
        t = setTimeout(showTime, 1000) //设定定时器，循环运行
      }
    </script>

    <script type="text/javascript">
      function testWindow() {
        var str = 'document.body.clientWidth=' + document.body.clientWidth + '\n'
        str = str + 'document.body.clientHeight=' + document.body.clientHeight + '\n'
        str = str + 'document.body.offsetWidth=' + document.body.offsetWidth + '\n'
        str = str + 'document.body.offsetHeight=' + document.body.offsetHeight + '\n'
        str = str + 'document.body.scrollWidth=' + document.body.scrollWidth + '\n'
        str = str + 'document.body.scrollHeight=' + document.body.scrollHeight + '\n'
        str = str + 'document.body.scrollTop=' + document.body.scrollTop + '\n'
        str = str + 'document.body.scrollLeft=' + document.body.scrollLeft + '\n'
        str = str + 'window.screenTop=' + window.screenTop + '\n'
        str = str + 'window.screenLeft=' + window.screenLeft + '\n'
        str = str + 'window.screen.height=' + window.screen.height + '\n'
        str = str + 'window.screen.width=' + window.screen.width + '\n'
        str = str + 'window.screen.availHeight=' + window.screen.availHeight + '\n'
        str = str + 'window.screen.availWidth=' + window.screen.availWidth
        alert(str)
      }

      //testWindow();
    </script>

    <script type="text/javascript">
      window.productFlag = false

      if (window.productFlag) window.baseurl = 'http://127.0.0.1:8081'
      else window.baseurl = 'http://47.240.54.105:8081'

      window.baseurl = 'http://47.240.54.105:8081'

      $(document).ready(function () {
        var vw = $(window).width()
        $('html').css({ fontSize: vw / 20 })
        $(window).resize(function () {
          var vw = $(window).width()
          $('html').css({ fontSize: vw / 20 })
        })

        //alert("default fontSize="+vw/20  +",vw="+vw); //,vw=1536   ,font=76.8
        //alert("window.screen.width="+window.screen.width);     //1536px
        //alert ("rem="+ $(window).width()/76.8);    // rem=20
      })

      window.onload = function () {
        if (window.productFlag) {
          getOderPlanList()
          setInterval(getOrderApi, 5000)
          setInterval(getProductList, 5000)
          //setInterval(recentProductAvgDiffList,1000*60*60);//一小时
          setInterval(recentProductAvgDiffList, 4000)

          setInterval(recentBadProductList, 4000)

          //setInterval(flushFinishRate,5000); //刷新完成率
        } else {
          getDemoApi()
          setInterval(flushProductAvgDiffList, 4000)

          getOderPlanList()
          setInterval(getProductList, 5000)

          //setInterval(getProductListDEmo,10000);
        }

        //setInterval(flushEffective,1000);

        //alert('html.style.fontSize='+ document.getElementById("echart222").style.fontSize);
        //document.getElementById("echart222").style.fontSize='20px';
        //alert('echart222.style.fontSize='+ document.getElementById("echart24").style.fontSize);  //15.2
        //多数浏览器的默认字体大小均为16px多数浏览器的默认字体大小均为16px

        var orderCodeTxt = localStorage.getItem('orderCodeTxt')
        var planQty = localStorage.getItem('planQty')
        var planQtyDaily = localStorage.getItem('planQtyDaily')
        //var dailyFinishRateExcept= localStorage.getItem("dailyFinishRateExcept");
        var realPieceTimeStandard = localStorage.getItem('realPieceTimeStandard')

        if (!(typeof orderCodeTxt == 'undefined' || orderCodeTxt == null)) {
          document.getElementById('orderCodeTxt').value = orderCodeTxt

          document.getElementById('planQty').innerHTML = planQty
          document.getElementById('planQtyDaily').innerHTML = planQtyDaily

          //document.getElementById("dailyFinishRateExcept").innerHTML=dailyFinishRateExcept;
          document.getElementById('realPieceTimeStandard').innerHTML = realPieceTimeStandard + '秒'

          window.orderCodeTxt = orderCodeTxt
        }
      }

      //var  t=null;
      function getDemoApi() {
        //clearTimeout(t);

        $.ajax({
          url: window.baseurl + '/digitization/plan/getActualProcess',
          type: 'get',
          dataType: 'json',
          success: function (data) {
            //alert('data='+ data.data);
            //document.getElementById("planQty").innerHTML = data.data ;
            document.getElementById('orderFinishRate').innerHTML = data.data + '%'
            document.getElementById('badQty').innerHTML = data.data
            document.getElementById('makedQty').innerHTML = data.data

            //document.getElementById("planQtyDaily").innerHTML = data.data ;
            document.getElementById('makedQtyDaily').innerHTML = data.data
            document.getElementById('badQtyDaily').innerHTML = data.data
            document.getElementById('passRateDaily').innerHTML = data.data + '%'

            document.getElementById('dailyFinishRate').innerHTML = data.data + '%'
            document.getElementById('dailyFinishRateExcept').innerHTML = data.data + '%'
            document.getElementById('realPieceTime').innerHTML = data.data + '秒'
            //document.getElementById("realPieceTimeStandard").innerHTML = data.data +"秒";

            //刷新数据
            var chart = echarts.getInstanceByDom(document.getElementById('pieMaked'))
            var option = chart.getOption()

            var listDat = [
              { name: '已生产', value: data.data },
              { name: '待生产', value: 120 - data.data }
            ]

            //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
            option.series[0].data = listDat

            chart.setOption(option)

            ///////////////////////pieMakedDaily////////////////
            chart = echarts.getInstanceByDom(document.getElementById('pieMakedDaily'))
            option = chart.getOption()

            listDat = [
              { name: '已生产', value: data.data },
              { name: '待生产', value: 60 - data.data }
            ]

            //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
            option.series[0].data = listDat

            chart.setOption(option)

            //////////////////////////

            flushEffectiveDemo(data.data)
            flushBadProduct(data)

            //flushFlowChart(data);
          },
          error: function (xhr, errorText, errorType) {
            //alert(errorText +",errorType="+errorType);
            //has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
          }
        })

        setTimeout(getDemoApi, 1 * 1000)
      }

      function getOrderApi() {
        //alert (" getProductApi-sorderCodeTxt= "+window.orderCodeTxt);
        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/loadOrder',
          data: JSON.stringify({ orderCode: window.orderCodeTxt }),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            //alert( JSON.stringify(res.msg));

            if (res.data.spOrder.orderCode) {
              document.getElementById('planQty').innerHTML = res.data.spOrder.planQty
              document.getElementById('orderFinishRate').innerHTML = res.data.spOrder.finishRate + '%' ////!!!
              document.getElementById('badQty').innerHTML = res.data.spOrder.badQty
              document.getElementById('makedQty').innerHTML = res.data.spOrder.makedQty

              document.getElementById('planQtyDaily').innerHTML = res.data.spDailyPlan.planQty
              document.getElementById('makedQtyDaily').innerHTML = res.data.spDailyPlan.makedQty
              document.getElementById('badQtyDaily').innerHTML = res.data.spDailyPlan.badQty
              document.getElementById('passRateDaily').innerHTML = res.data.spDailyPlan.passRate + '%'

              document.getElementById('dailyFinishRate').innerHTML = res.data.spDailyPlan.finishRate + '%'
              document.getElementById('dailyFinishRateExcept').innerHTML = res.data.spDailyPlan.expectFinishRate + '%' ///???
              document.getElementById('realPieceTime').innerHTML = res.data.spDailyPlan.realPieceTime + '秒'
              document.getElementById('realPieceTimeStandard').innerHTML = res.data.spDailyPlan.pieceTime + '秒'

              //刷新饼图数据
              var chart = echarts.getInstanceByDom(document.getElementById('pieMaked'))
              var option = chart.getOption()

              var listDat = [
                { name: '已生产', value: res.data.spOrder.finishRate },
                { name: '待生产', value: 100 - res.data.spOrder.finishRate }
              ]

              //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
              option.series[0].data = listDat

              chart.setOption(option)

              ///////////////////////pieMakedDaily////////////////
              chart = echarts.getInstanceByDom(document.getElementById('pieMakedDaily'))
              option = chart.getOption()

              listDat = [
                { name: '已生产', value: res.data.spDailyPlan.finishRate },
                { name: '待生产', value: 100 - res.data.spDailyPlan.finishRate }
              ]

              //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
              option.series[0].data = listDat

              chart.setOption(option)

              //flushEffective(res.data.spDailyPlan.realPieceTime);
              flushEffective(res.data.spDailyPlan)
            }
          },
          error: function (err) {
            // alert( JSON.stringify(err));
          }
        })
      }

      pieMaked()
      pieMakedDaily()

      //enterfullscreen();

      var listFlowData = [
        [50, 50, 50, 50, 50, 98],
        [50, 50, 50, 50, 98, 50],
        [50, 50, 50, 98, 50, 50],
        [50, 50, 98, 50, 50, 50],
        [50, 98, 50, 50, 50, 50],
        [98, 50, 50, 50, 50, 50]
      ]
      var count = 0
      var tFlow = null
      tFlow = setTimeout(flushFlowChart, 1000) //開始运行

      function flushFlowChart() {
        clearTimeout(tFlow) //清除定时器

        var chart = echarts.getInstanceByDom(document.getElementById('flowChart'))

        var option = chart.getOption() //var listDat=[10,5,8,3,6,4];

        var listDat = listFlowData[count] //[60, 33, 10, 50, 80, 98];
        count = (count + 1) % 6
        //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
        option.series[0].data[0].value = listDat

        chart.setOption(option)
        //alert("count="+count+ "list="+option.series[0].data);

        if (window.productFlag) tFlow = setTimeout(flushFlowChart, 10000)
        else tFlow = setTimeout(flushFlowChart, 3000)
      }

      var listProductData = [
        [30, 0, -20, 10, -15, 40],
        [-30, 20, 10, 20, -15, 20],
        [0, -10, 10, 30, 0, -10],
        [5, -15, 15, 25, 0, -15],
        [20, -20, 10, 20, -15, 20],
        [0, 10, -10, 20, -15, 10]
      ]
      var countP = 0
      //var tProduct = null;
      //tProduct = setTimeout(flushProductChart, 1000);//開始运行

      function flushProductAvgDiffList() {
        //clearTimeout(tProduct);//清除定时器

        var chart = echarts.getInstanceByDom(document.getElementById('echart3'))

        var option = chart.getOption() //var listDat=[10,5,8,3,6,4];

        var listDat = listProductData[countP] //[60, 33, 10, 50, 80, 98];
        countP = (countP + 1) % 6
        //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
        option.series[0].data = listDat

        chart.setOption(option)
        //alert("count="+count+ "list="+option.series[0].data);

        //tProduct = setTimeout(flushProductChart, 4000);
      }

      //
      ////
      var colorFlag = 0
      var tColor = null
      var standard = 30

      var vite = 1
      //var data=10;

      if (!window.productFlag) tColor = setTimeout('flushEffectiveDemo(' + data + ')', 1000)
      else tColor = setTimeout('flushEffective(' + data + ')', 1000)

      function flushEffectiveDemo(data) {
        clearTimeout(tColor) //清除定时器
        //alert("data="+data);

        if (colorFlag == 0) {
          if (data > standard + vite) {
            document.getElementById('realPieceTimeColor').className = 'dot dot1' //red
          } else if (data < standard - vite) {
            document.getElementById('realPieceTimeColor').className = 'dot dot4' //yellow
          } else {
            document.getElementById('realPieceTimeColor').className = 'dot dot2' //green
          }

          if (data < standard) {
            document.getElementById('dailyFinishColor').className = 'dot dot1' //red
          } else if (data > standard) {
            document.getElementById('dailyFinishColor').className = 'dot dot4' //yellow
          } else {
            document.getElementById('dailyFinishColor').className = 'dot dot2' //green
          }
        } else {
          document.getElementById('realPieceTimeColor').className = 'dot dot3' // 无色
          document.getElementById('dailyFinishColor').className = 'dot dot3'
        }

        colorFlag = (colorFlag + 1) % 2

        tColor = setTimeout('flushEffectiveDemo(' + data + ')', 1000)
      }

      ////(res.data.spDailyPlan
      function flushEffective(data) {
        standard = localStorage.getItem('realPieceTimeStandard')
        clearTimeout(tColor) //清除定时器
        //alert("data="+data.realPieceTime  +"standard+vite="+standard);

        if (colorFlag == 0) {
          if (data.realPieceTime > standard) {
            document.getElementById('realPieceTimeColor').className = 'dot dot1' //red
          } else if (data.realPieceTime < standard) {
            document.getElementById('realPieceTimeColor').className = 'dot dot4' //yellow
          } else {
            document.getElementById('realPieceTimeColor').className = 'dot dot2' //green
          }

          //////////////
          if (data.finishRate < data.expectFinishRate + vite) {
            document.getElementById('dailyFinishColor').className = 'dot dot1' //red
          } else if (data.finishRate > data.expectFinishRate - vite) {
            document.getElementById('dailyFinishColor').className = 'dot dot4' //yellow
          } else {
            document.getElementById('dailyFinishColor').className = 'dot dot2' //green
          }
        } else {
          document.getElementById('realPieceTimeColor').className = 'dot dot3'
          document.getElementById('dailyFinishColor').className = 'dot dot3'
        }

        colorFlag = (colorFlag + 1) % 2

        tColor = setTimeout('flushEffective(' + data + ')', 1000)
      }

      function flushBadProduct(data) {
        var chart = echarts.getInstanceByDom(document.getElementById('badProductChart'))
        var option = chart.getOption() //var listDat=[10,5,8,3,6,4];

        var listDat = [data.data % 10, data.data % +3, (data.data % 10) + 8, (data.data % 10) + 2, (data.data % 10) + 6, (data.data % 10) + 13]

        //option.series[0].data = [{name: '已生产',value: data.data},{name: '待生产',value: 60-data.data}];;
        option.series[0].data = listDat

        chart.setOption(option)
      }

      function pieMaked() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('pieMaked'))
        option = {
          title: [
            {
              text: '订单总体计划',
              top: 0,
              left: 'center',
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: '14'
              }
            }
          ],
          tooltip: {
            trigger: 'item',
            //formatter: "{a} <br/>{b}: {c} ({d}%)",
            formatter: '{a} <br/>{b}: {d}%',
            position: function (p) {
              //其中p为当前鼠标的位置
              return [p[0] + 10, p[1] - 10]
            }
          },
          legend: {
            //上面的小方块和文字
            show: false,
            top: '99%',
            itemWidth: 10,
            itemHeight: 10,
            data: ['总体已生产', '未生产'],
            textStyle: {
              color: 'rgba(255,255,255,.5)',
              fontSize: '14'
            }
          },
          series: [
            {
              name: '订单总计划',
              type: 'pie',
              center: ['50%', '36%'],
              radius: ['40%', '60%'],
              //color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
              color: ['#00ea37', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
              label: { show: true, position: 'center' },
              labelLine: { show: false },
              data: [
                { name: '已生产', value: 30 },
                { name: '待生产', value: 70 }
              ]
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }

      function pieMakedDaily() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('pieMakedDaily'))
        option = {
          title: [
            {
              text: '订单总体计划',
              top: 0,
              left: 'center',
              show: false,
              textStyle: {
                color: '#fff',
                fontSize: '14'
              }
            }
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {d}%',
            // formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (p) {
              //其中p为当前鼠标的位置
              return [p[0] + 10, p[1] - 10]
            }
          },
          legend: {
            //上面的小方块和文字
            show: false,
            top: '99%',
            itemWidth: 10,
            itemHeight: 10,
            data: ['总体已生产', '未生产'],
            textStyle: {
              color: 'rgba(255,255,255,.5)',
              fontSize: '14'
            }
          },
          series: [
            {
              name: '订单总计划',
              type: 'pie',
              center: ['50%', '36%'],
              radius: ['40%', '60%'],
              //color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
              color: ['#00ea37', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
              label: { show: true, position: 'center' },
              labelLine: { show: false },
              data: [
                { name: '已生产', value: 10 },
                { name: '待生产', value: 90 }
              ]
            }
          ]
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)

        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }

      //setTimeout(myChart.resize(), 1000);

      //控制全屏
      function enterfullscreen() {
        //进入全屏

        window.resizeTo(800, 800)

        $('#fullscreen').html('退出全屏')
        var docElm = document.documentElement

        //Chrome等
        if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
          //alert("Chrome等");
        }

        //W3C
        else if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
          //alert("w3c");
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
          //alert("FireFox");
        }
        //IE11
        else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen()
          //alert("IE11");
        } else {
          //alert("other");
        }
      }

      function exitfullscreen() {
        //退出全屏
        $('#fullscreen').html('切换全屏')
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      }

      var a = 0
      $('#fullscreen').on('click', function () {
        a++
        a % 2 == 1 ? enterfullscreen() : exitfullscreen()
      })
    </script>

    <script type="text/javascript">
      function loadOrder() {
        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/loadOrder',
          data: JSON.stringify({
            orderCode: document.getElementById('orderCodeTxt').value,
            orderDescription: document.getElementById('orderCodeTxt').value
          }),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            //  alert( JSON.stringify(res.msg));

            if (res.data.spOrder.orderCode) {
              localStorage.removeItem('orderCodeTxt')
              localStorage.setItem('orderCodeTxt', res.data.spOrder.orderCode)

              localStorage.removeItem('planQty')
              localStorage.setItem('planQty', res.data.spOrder.planQty)

              localStorage.removeItem('planQtyDaily')
              localStorage.setItem('planQtyDaily', res.data.spDailyPlan.planQty)

              localStorage.removeItem('realPieceTimeStandard')
              localStorage.setItem('realPieceTimeStandard', res.data.spDailyPlan.pieceTime)
              localStorage.removeItem('dailyFinishRateExcept')
              localStorage.setItem('dailyFinishRateExcept', res.data.spDailyPlan.finishRate)

              //alert ("set localStorage-orderCodeTxt= "+localStorage.getItem("orderCodeTxt"));

              document.getElementById('planQty').innerHTML = res.data.spOrder.planQty
              document.getElementById('orderFinishRate').innerHTML = res.data.spOrder.finishRate + '%' ////!!!
              document.getElementById('badQty').innerHTML = res.data.spOrder.badQty
              document.getElementById('makedQty').innerHTML = res.data.spOrder.makedQty

              document.getElementById('planQtyDaily').innerHTML = res.data.spDailyPlan.planQty
              document.getElementById('makedQtyDaily').innerHTML = res.data.spDailyPlan.makedQty
              document.getElementById('badQtyDaily').innerHTML = res.data.spDailyPlan.badQty
              document.getElementById('passRateDaily').innerHTML = res.data.spDailyPlan.passRate + '%'

              document.getElementById('dailyFinishRate').innerHTML = res.data.spDailyPlan.finishRate + '%'
              document.getElementById('dailyFinishRateExcept').innerHTML = res.data.spDailyPlan.finishRate + '%' ///???
              document.getElementById('realPieceTime').innerHTML = res.data.spDailyPlan.realPieceTime + '秒'
              document.getElementById('realPieceTimeStandard').innerHTML = res.data.spDailyPlan.pieceTime + '秒'
            }
          },
          error: function (err) {
            // alert( JSON.stringify(err));
          }
        })
      }

      function getOderPlanList() {
        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/orderPlanList',
          data: JSON.stringify({}),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            //alert( JSON.stringify(res.msg));
            if (res.data) {
              var colorred = '<span class="text-red">'
              var colorgreen = '<span class="text-green">'

              $('#orderPlanList').find('li').remove() //无效
              res.data.forEach(function (item) {
                var li_str =
                  '<li> <span>' +
                  item.orderCode +
                  '</span> <span>' +
                  item.planQty +
                  '</span> <span>' +
                  item.planStartTime +
                  '</span> <span>' +
                  item.planEndTime +
                  '</span> '
                if (item.status == '订单终结') li_str += colorred
                else li_str += colorgreen
                li_str += item.status + '</span> <span>' + item.finishRate + '%</span></li>'

                $('#orderPlanList').append(li_str)
              })
            }
          },
          error: function (err) {
            // alert( JSON.stringify(err));
          }
        })
      }

      function getProductList() {
        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/productList',
          data: JSON.stringify({ orderCode: localStorage.getItem('orderCodeTxt') }),
          //不能使用 这个 ！！！ document.getElementById("orderCodeTxt").value}),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            //alert( JSON.stringify(res));
            if (res.data) {
              var colorred = '<span class="text-red">不合格</span>'
              var colorgreen = '<span class="text-green">合格</span>'

              $('#productList').find('li').remove()
              res.data.forEach(function (item) {
                var li_str = '<li> <span>' + item.productId + '</span>  '
                if (item.quality == 'NG' || item.quality == 'ng' || item.quality == '不合格') li_str += colorred
                else li_str += colorgreen
                li_str += ' <span>' + item.createTime + '</span></li>'

                $('#productList').append(li_str)
              })
            }
          },
          error: function (err) {
            // alert( JSON.stringify(err));
          }
        })
      }

      function getProductListDEmo1() {
        var colorred = '<span class="text-red">不合格</span>'
        var colorgreen = '<span class="text-green">合格</span>'

        $('#productList').find('li').remove()
        //$('#productList').remove();

        for (var i = 0; 1 < 60; i++) {
          var li_str = '<li> <span>' + 'ECG20220805' + i + '</span>  '

          if (i == 30) li_str += colorred
          else li_str += colorgreen

          li_str += ' <span>' + '2022-08-05 10:10' + i + '</span></li>'

          $('#productList').append(li_str)
        }
      }

      function getProductListDEmo() {
        var colorred = '<span class="text-red">不合格</span>'
        var colorgreen = '<span class="text-green">合格</span>'

        $('#productList').find('li').remove()
        //$('#productList').remove();

        for (var i = 0; 1 < 60; i++) {
          var li_str = '<li> <span>' + 'ECG20220805' + i + '</span>  '

          if (i == 30) li_str += colorred
          else li_str += colorgreen

          li_str += ' <span>' + '2022-08-05 10:10' + i + '</span></li>'

          $('#productList').append(li_str)
        }
      }

      function flushFinishRate() {
        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/FlushFinishRate',
          data: JSON.stringify({ orderCode: localStorage.getItem('orderCodeTxt') }),
          //不能使用 这个 ！！！ document.getElementById("orderCodeTxt").value}),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            //alert( JSON.stringify(res));
            if (res.data) {
            }
          },
          error: function (err) {
            // alert( JSON.stringify(err));
          }
        })
      }

      function recentProductAvgDiffList() {
        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/recentProductAvgDiffList',
          data: JSON.stringify({ orderCode: localStorage.getItem('orderCodeTxt') }),
          //不能使用 这个 ！！！ document.getElementById("orderCodeTxt").value}),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            //alert( JSON.stringify(res));
            if (res.data) {
              var chart = echarts.getInstanceByDom(document.getElementById('echart3'))
              var option = chart.getOption()
              option.series[0].data = res.data
              chart.setOption(option)
            }
          },
          error: function (err) {
            //alert( JSON.stringify(err));
          }
        })
      }

      function recentBadProductList() {
        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/recentBadProductList',
          data: JSON.stringify({ orderCode: localStorage.getItem('orderCodeTxt') }),
          //不能使用 这个 ！！！ document.getElementById("orderCodeTxt").value}),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            //alert( JSON.stringify(res));
            if (res.data) {
              var chart = echarts.getInstanceByDom(document.getElementById('badProductChart'))
              var option = chart.getOption()
              option.series[0].data = res.data
              chart.setOption(option)
            }
          },
          error: function (err) {
            //alert( JSON.stringify(err));
          }
        })
      }

      //setTimeout(addProduct,1000);
      function addProduct() {
        var data = { orderNo: localStorage.getItem('orderCodeTxt'), productId: 'bitch', id: '1549035413507842049' }

        alert('data=' + JSON.stringify(data))

        $.ajax({
          type: 'post',
          url: window.baseurl + '/digitization/plan/updateProduct',
          data: JSON.stringify(data),
          //不能使用 这个 ！！！ document.getElementById("orderCodeTxt").value}),
          contentType: 'application/json',
          dataType: 'json',
          async: true,
          success: function (res) {
            alert(JSON.stringify(res))
            if (res.data) {
            }
          },
          error: function (err) {
            //alert( JSON.stringify(err));
          }
        })
      }
    </script>
  </body>
</html>
